.options {
  .options-box {
    cursor: pointer;
    svg {
      width: 22px;
      height: 22px;
    }
    &:hover svg {
      color: #13987f;
      animation: twinkle 0.3s ease-in-out;
    }
  }
}

.box-item {
  @apply border-(solid 1px [--line-color]) custom-shadow;
  &:first-child {
    margin-top: 0;
  }
  color: var(--text-color);
  margin-top: 20px;
  background: var(--bg-setting-item);
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  box-sizing: border-box;
  font-size: 14px;
}

.mac-close:hover {
  svg {
    display: block;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.sidebar {
  @apply flex flex-col absolute top-42px right-0 bg-[--bg-chat-drawer] p-22px box-border w-320px h-100vh shadow-[0_14px_14px_rgba(0,0,0,0.35)];
}

/**! 使用vue内置transition做过渡效果 */
// 进入动画的生效状态
.sidebar-enter-active {
  animation: slideIn 0.3s ease-in-out;
}
// 离开动画的生效状态
.sidebar-leave-active {
  animation: slideOut 0.3s ease-in-out;
}
/**!end */
